<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
</head>
<body>
        <div class="container" id="vuebox">
            <div class="row form-inline">
                <div class="col-md-2 col-md-push-3">
                    起飞城市:
                    <select class="form-control" v-model="CityListId1">
                        <option value="0">全部</option>
                        <option  v-for="item in CityList" :value="item.id">{{item.cityname}}</option>
                    </select>
                </div>
                <div class="col-md-2 col-md-push-3">
                    &nbsp;&nbsp;&nbsp;到达城市:
                    <select class="form-control" v-model="CityListId2">
                        <option value="0">全部</option>
                        <option  v-for="item in CityList" :value="item.id">{{item.cityname}}</option>
                    </select>
                </div>
                <div class="col-md-2 col-md-push-3">
                    <button class="btn btn-success" @click="selAll(1)">查询</button>
                    <button class="btn btn-primary" @click="showModal()">增加航班</button>
                </div>
            </div>

            <br/>
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>航班编号</th>
                        <th>起飞城市</th>
                        <th>起飞时间</th>
                        <th>到达城市</th>
                        <th>到达时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in FlightList.data.list">
                        <td>{{item.flightno}}</td>
                        <td v-for="c in CityList" v-show="c.id==item.departurecity">{{c.cityname}}</td>
                        <td>{{item.departuretime}}</td>
                        <td v-for="c in CityList" v-show="c.id==item.arrivalcity">{{c.cityname}}</td>
                        <td>{{item.arrivaltime}}</td>
                        <td>
                            <button class="btn btn-primary" @click="to_update(item.id)">修改</button>
                            <button class="btn btn-danger" @click="del(item.id)">删除</button>
                        </td>
                </table>
            <br/>
            <div class="text-center">
            <ul class="pagination">
                <li v-show="FlightList.data.hasPreviousPage">
                    <a href="#" @click="selAll(FlightList.data.prePage)">&laquo;</a>
                </li>
                <li :class="{active:FlightList.data.pageNum==i}" v-for="i in FlightList.data.navigatepageNums">
                    <a href="#" @click="selAll(i)">{{i}}</a>
                </li>
                <li v-show="FlightList.data.hasNextPage">
                    <a href="#" @click="selAll(FlightList.data.nextPage)">&raquo;</a></li>
            </ul>
            </div>
            <!--模态框-->
            <div class="modal" id="mymodal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" type="button" @click="hideModal()">&times;</button>
                            <div class="modal-title">
                                添加航班
                            </div>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">

                                    <div class="col-sm-10">
                                        <input v-model="new_contact.id" id="id" type="hidden" class="form-control"  placeholder="自增">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="mobile" class="col-sm-2 control-label">航班编号</label>
                                    <div class="col-sm-10">
                                        <input v-model="new_contact.flightno" id="mobile" type="text" class="form-control" placeholder=""/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="cname" class="col-sm-2 control-label">起飞城市</label>
                                    <div class="col-sm-10">
                                        <select id="cname" class="form-control" v-model="new_contact.departurecity">
                                            <option value="0">全部</option>
                                            <option v-for="item in CityList" :value="item.id">{{item.cityname}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="col-sm-2 control-label">起飞时间</label>
                                    <div class="col-sm-10">
                                        <input v-model="new_contact.departuretime" id="email" type="text" class="form-control" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="qq" class="col-sm-2 control-label">到达城市</label>
                                    <div class="col-sm-10">
                                        <select id="qq" class="form-control" v-model="new_contact.arrivalcity">
                                            <option value="0">全部</option>
                                            <option v-for="item in CityList" :value="item.id">{{item.cityname}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="ccc" class="col-sm-2 control-label">到达时间</label>
                                    <div class="col-sm-10">
                                        <input v-model="new_contact.arrivaltime" id="ccc" type="text" class="form-control" placeholder="">
                                    </div>
                                </div>

                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default" @click="hideModal()">关闭</button>
                            <button class="btn btn-primary" @click="save()">保存</button>
                        </div>
                    </div>
                </div>
            </div>


        </div>
</body>
</html>

<script type="text/javascript">
    var vm=new Vue({
        el:"#vuebox",
        data:{
            CityList:[],
            CityListId1:"0",
            CityListId2:"0",
            pageNum:"1",
            FlightList:[],
            new_contact:{id:'', flightno:'',departurecity:'0',departuretime:'',arrivalcity:'0',arrivaltime:'',},
            result:[]


        },
        methods:{
            selAll:function (pageNum) {
                axios.get("http://localhost:8080/selAll",{params:{pageNum:pageNum,id1:this.CityListId1,id2:this.CityListId2}}).then(res=>{
                    this.FlightList=res.data;
                })
                this.pageNum=pageNum;

            },
            del:function (id) {
                axios.get("http://localhost:8080/del",{params:{id:id}}).then(res=>{
                    this.result=res.data;
                    if(this.result.result=="SUCCESS"){
                        alert("删除成功");
                        this.selAll(this.pageNum);
                    }else {
                        alert(this.result.message);
                    }
                })
            },
            to_update:function (id) {
                axios.get("http://localhost:8080/selById",{params:{id:id}}).then(res=>{
                    this.new_contact=res.data.data;
                    this.showModal();
                })

            },
            showModal:function () {
                $('#mymodal').modal('show');
            },
            hideModal:function () {
                $('#mymodal').modal('hide');
                this.clearModal();
            },
            clearModal:function () {
                $('#id').val('');
                $('#cname').val('');
                $('#mobile').val('');
                $('#qq').val('');
                $('#email').val('');
                $('#ccc').val('');
            },
            save:function () {
                axios.post("http://localhost:8080/save",this.new_contact).then(res=>{
                    this.result=res.data;
                    if(this.result.result=="SUCCESS"){
                        alert("成功");
                        this.selAll(this.pageNum);
                        this.hideModal();
                    }else{
                        alert(this.result.message);
                    }
                })

            }
        },
        mounted(){
            axios.get("http://localhost:8080/getCityList").then(res=>{this.CityList=res.data.data});
            this.selAll(1);
        }

    })


</script>